<!-- 选择关系标签 -->
<template>
  <a-spin :spinning="loading">
    <div class="select-entity-label-wrap">
      <div class="select-entity-label-title">{{ title }}</div>
      <div class="select-entity-label-list-wrap my-scrollbar">
        <ul v-if="list?.length">
          <li
            v-for="item in list"
            :key="item.id"
            class="select-entity-label-list-menu-item"
            :title="item.name"
            @click="handleMenuClick(item)"
          >
            <p>{{ item.name }}</p>
          </li>
        </ul>
        <default-image v-else height="100px" title="暂无内容" />
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { defineEmits, defineProps } from 'vue'

  import { MarkTaskLabelRes } from './LabelCard/types'

  export interface SelectEntityLabelProps {
    title?: string
    loading?: boolean
    list?: MarkTaskLabelRes[]
  }
  withDefaults(defineProps<SelectEntityLabelProps>(), {
    title: '请选择实体类别标签',
    loading: false
  })

  const emits = defineEmits<{
    (event: 'menuClick', data: any): void
  }>()

  const handleMenuClick = (item: any) => {
    emits('menuClick', item)
  }
</script>

<style lang="less" scoped>
  .select-entity-label-wrap {
    width: 160px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(37, 37, 45, 0.14), 0 2px 8px 0 rgba(37, 37, 45, 0.14);

    .select-entity-label-title {
      padding: 4px 8px;
      width: 100%;
      font-size: 12px;
      color: @text03;
      font-weight: 400;
      line-height: 20px;
      border-bottom: 0.5px solid @border1;
      flex-shrink: 0;
    }

    .select-entity-label-list-wrap {
      overflow-y: auto;
      width: 100%;
      max-height: 200px;

      > ul {
        padding: 4px;
        width: 100%;

        > li {
          display: flex;
          align-items: center;
          padding: 0 12px;
          box-sizing: border-box;
          width: 100%;
          min-width: 0;
          height: 32px;
          cursor: pointer;

          > p {
            .elliptical-1();
          }

          &:hover {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
          }
        }
      }

      // :deep(.ant-dropdown-menu-title-content) {
      //   width: 100%;
      //   .elliptical-1();
      // }
    }
  }
</style>
